<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.web{
				width: 303px;
				height: 133px;
				overflow: hidden;
				margin: 0 auto;
				position:relative;
			}
			.tu{
				width: 5000px;
			}
			.tu::after{
				content: "";
				display: block;
				clear: both;
			}
			.tu li{
				width: 303px;
				height: 133px;
				float: left;
			}
			.tu li img{
				width: 100%;
			}
			.next,.pre{
				position: absolute;
				top: 50%;
				font-size: 25px;
				color: #fff;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: rgba(0,0,0,0.3);
				line-height: 30px;
				text-align: center;
				transform: translateY(-50%);
				cursor: pointer;
				opacity: 0;
				transition: 1s;
			}
			.next{
				right:0;
				margin-right: 10px;
			}
			.pre{
				left: 0;
				margin-left: 10px;
			}
			.next:hover,.pre:hover{
				background: rgba(0,0,0,0.6);	
				transition: 1s;
			}
			.tran{
				transition: 1s;
			}
			.sorter{
				position: absolute;
				bottom: 10px;
				transform: translateX(-50%);
				left: 50%;
			}
			.sorter span{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				font-size: 20px;
				background: #fff;
				margin: 0 5px;
				cursor: pointer;
			}
			.sorter .yuan{
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<!--图片-->
			<ul class="tu">
				<li><img src="img/youxi-11.png"/></li>
				<li><img src="img/youxi-12.png"/></li>
				<li><img src="img/youxi-13.png"/></li>
				<li><img src="img/youxi-14.png"/></li>
			</ul>
			<!--按钮-->
			<div class="next">&gt;</div>
			<div class="pre">&lt;</div>
			<!--分页器-->
			<div class="sorter"></div>
		</div>
		<script type="text/javascript">
			var tu = document.querySelector(".tu"),
				next = document.querySelector(".next"),
				pre = document.querySelector(".pre"),
				web = document.querySelector(".web")
				ali = document.querySelectorAll(".tu li");
			var imgw = ali[0].offsetWidth;
			var index = 1;
			var isClick=true;
			var clone_left=ali[0].cloneNode(true);
			     tu.appendChild(clone_left);
			var clone_right=ali[ali.length-1].cloneNode(true);
				tu.insertBefore(clone_right,ali[0]);
			tu.style.transform="translateX(-"+imgw*index+"px)";
			//鼠标移入时按钮出现
			web.addEventListener("mouseenter",function(){
					next.style.opacity="1";
					pre.style.opacity="1";
			})
			//鼠标移出时按钮消失
			web.addEventListener("mouseleave",function(){
					next.style.opacity="0";
					pre.style.opacity="0";
			})
			//右键
			next.addEventListener("click",function(){
				if(isClick){
					index++;
					tu.style.transform="translateX(-"+imgw*index+"px)";
					if(!tu.classList.contains("tran")){
						tu.classList.add("tran");
					};
					addColr(index);
				};
				isClick=false;
				
			});
			//左键
			pre.addEventListener("click",function(){
				if(isClick==true){
					index--;
					tu.style.transform="translateX(-"+imgw*index+"px)";
					if(!tu.classList.contains("trran")){
						tu.classList.add("tran");
					};
					addColr(index);
				};
				isClick=false;
			});
			tu.addEventListener("transitionend",function(){
				if(index==ali.length+1){
					index=1;
					tu.style.transform="translateX(-"+imgw*index+"px)";
					tu.classList.remove("tran");
				};
				if(index==0){
					index=ali.length;
					tu.style.transform="translateX(-"+imgw*index+"px)";
					tu.classList.remove("tran");
				};
				isClick=true;
			});
			setInterval(function(){
				if(isClick){
					index++;
					tu.style.transform="translateX(-"+imgw*index+"px)";
					if(!tu.classList.contains("tran")){
						tu.classList.add("tran");
					};
					addColr(index);
				};
				
				isClick=false;
			},1000);
			var sorter=document.querySelector(".sorter");
			for (var i=0;i<ali.length;i++) {
				var span = document.createElement("span");
			     sorter.appendChild(span);
			}
			var aspan = sorter.children;
				aspan[0].classList.add("yuan");
				for (var i=0;i<ali.length;i++){
					(function(k){
						aspan[k].addEventListener("click",function(){
							tu.style.transform="translateX(-"+imgw*(1+k)+"px)";
							for (var j=0;j<ali.length;j++) {
								aspan[j].classList.remove("yuan");
							}
							aspan[k].classList.add("yuan");
						});
						
					})(i);
				}
				function addColr(k) {
				k = k - 1;
				if(k > aspan.length - 1) {
					k = 0;
				} else if(k < 0) {
					k = 3;
				}
				for(var j = 0; j < aspan.length; j++) {
					aspan[j].classList.remove("yuan");
				}
				aspan[k].classList.add("yuan");
			}
		</script>
	</body>
</html>
